<template>
	<div style="display: flex;height:300px;">
		<el-dialog title="调班" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-select v-model="newClazzId" placeholder="请选择" style="width: 100%;">
				<el-option v-for="item in ClazzByCourseId" :key="item.id" :label="item.className" :value="item.id">
				</el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="changeClazz()">确 定</el-button>
			</span>
		</el-dialog>
		<div class="left">
			<div class="main">
				<div style="margin-right: 1.25rem;" @click="newClassMask=true"><i class="el-icon-circle-plus-outline"></i>新建班级</div>
				<div @click="$router.push('/ClassManagement')"><i class="el-icon-setting"></i>管理班级</div>
			</div>
			<div class="left_item">
				<el-menu class="el-menu-vertical-demo">
					<el-menu-item v-for="intem in ClazzByCourseId" :key="intem.id" @click="getStudents(intem.id,intem.className)"
					 style="color: #000000;display: flex;" v-show="intem.isDelete==0">
						<span slot="title">{{intem.className}}</span>
					</el-menu-item>

				</el-menu>
			</div>
		</div>
		<el-dialog title="新建班级" :visible.sync="newClassMask" width="30%" :before-close="handleClose">
			<el-input v-model="className" placeholder="班级名称" class="input" style="width: 100%;"></el-input>
			<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 9}" placeholder="班级描述" v-model="clazzDescribe" class="input"
			 style="margin-top: 1.25rem;">
			</el-input>

			<span slot="footer" class="dialog-footer">
				<el-button @click="newClassMask = false">取 消</el-button>
				<el-button type="primary" @click="creatClazzByTeacher()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加学生" :visible.sync="addstudent" width="50%" :before-close="handleClose">
			<el-tabs type="border-card" style="width: 100%;">
				<el-tab-pane label="手动添加">
					<div style="display: flex;justify-content: center;flex-direction: column;align-items: center;width: 100%;height: 300px;">
						<div style="font-weight: 300;font-size: 1.3rem;">通过输入手机添加学生</div>
						<div style="width: 80%;margin-top: 1.5rem;">
							<div>手机</div>
							<el-input v-model="studentPhone" placeholder="请输入内容" style="width: 100%;margin-top: 0.625rem;"></el-input>
							<div style="display: flex;justify-content: flex-end;margin-top: 1.875rem;">
								<el-button @click="addstudent = false">取 消</el-button>
								<el-button type="primary" @click="addStudentToClazzByPhone()">添加</el-button>
							</div>
						</div>

					</div>
				</el-tab-pane>
				<el-tab-pane label="从学生库添加">
					<div class="btn_group">
						<div style="display: flex;margin-right: 1.875rem;">
							<!-- <el-input v-model="studentName" placeholder="学生名"></el-input> -->
							<el-input v-model="studentNum" placeholder="学生学号" style="margin-left: 1.25rem;"></el-input>
						</div>
						<!-- 搜索框 -->
						<div class="dataSearch">
							<el-button style="border:1px #03d3bd solid;color:#03d3bd;" @click="Rebuild()">重设</el-button>
							<el-button type="primary" style="background-color:#03d3bd;border: none;" @click="Search()">搜索</el-button>
						</div>
					</div>
					<student :studentList="studentList" v-on:SendMessge="SendMessge"></student>
					<div style="display: flex;justify-content: flex-end;">
						<el-button style="margin-top: 0.625rem;" @click="addStudentsToClazzByPhone()">添加</el-button>
					</div>

				</el-tab-pane>
				<el-tab-pane label="批量导入" class="group">
					<div>
						<div style="margin-right: 1.25rem;color: #cecece;cursor: pointer;" @click="GettudentUploadTemplate">
							<i class="el-icon-download"></i><a id="linkUrl">模板下载</a>

						</div>
					</div>
					<div>
						<!-- 	<div style="margin-right: 1.25rem;color: #cecece;cursor: pointer;" @click.native="GettudentUploadTemplate">
							<i class="el-icon-download"></i>导入Excel给班级添加学生
						</div> -->
						<el-upload class="filter-item" name="studentExcelFile" :action="uploadUrl()" :on-error="uploadFalse" :on-success="uploadSuccess"
						 :before-upload="beforeUpload" :limit="1" accept=".xlsx,.xls" :show-file-list="false" :file-list="fileList"
						 :headers="myHeader">
							<span style="margin-right: 1.25rem;color: #cecece;cursor: pointer;"><i class="el-icon-download"></i>Excel给班级添加学生</span>
						</el-upload>
					</div>
				</el-tab-pane>
			</el-tabs>

		</el-dialog>
		<div class="right" style="overflow: hidden;height: 100vh;">
			<div style="border-bottom: 1px solid;height: 1.875rem;line-height: 1.875rem;">{{classname}}</div>
			<!-- 顶部按钮 -->
			<div class="btn_group">
				<div class="header1">
					<div>
						<el-button round icon="el-icon-plus" @click="ChangeStudent()">添加学生</el-button>
						<el-button type="success" round icon="el-icon-upload2">导出名单</el-button>

					</div>

				</div>
				<!-- 搜索框 -->
				<div class="dataSearch">

					<!-- 输入框 -->
					<input type="text" class="ipt_val" placeholder="搜索" v-model="formData.search" />
					<!-- 放大镜 -->
					<input type="button" class="ipt_fdj" @click="getFiles" />
					<!-- 搜索按钮 -->
					<button type="button" class="ipt_search" @click="getFiles">搜索</button>
				</div>
			</div>
			<el-table ref="multipleTable" :data="ClassStudents" tooltip-effect="dark" style="width: 100%;overflow: scroll;height: 600px;"
			 @selection-change="handleSelectionChange" :header-cell-style="{'background-color': '#f2f4f7'}" :cell-style="{padding:'20px 0'}">
				<el-table-column type="selection">
				</el-table-column>
				<el-table-column label="姓名">
					<template slot-scope="scope">{{ scope.row.userPhone }}</template>
				</el-table-column>
				<el-table-column prop="schoolName" label="学校">
				</el-table-column>
				<el-table-column prop="collegeName" label="院系">
				</el-table-column>
				<el-table-column prop="majorName" label="专业">
				</el-table-column>
				<el-table-column prop="userNum" label="学号">
				</el-table-column>
				<el-table-column prop="clazzName" label="班级">
				</el-table-column>
				<el-table-column prop="createTime" label="加入时间" show-overflow-tooltip>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="220">
					<template slot-scope="scope">
						<el-button style="background-color:#03d3bd;color: white;" size="mini" @click="deleteStudentFromClazz(scope.row.userPhone)">移出</el-button>
						<el-button style="background-color: #ffab03;color: white;" 　size="mini" @click="changeStudentClazz(scope.row.clazzId,scope.row.userPhone)">调班</el-button>

					</template>
				</el-table-column>

			</el-table>
		</div>
	</div>
</template>

<script>
	import student from './student.vue';
	import XLSX from 'xlsx'
	import {
		BASE_URL
	} from "../../../../request/config.js"
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
	export default {
		components: {
			student: student,

		},
		data() {
			return {
				tableData: [],
				multipleSelection: [],
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				newClassMask: false,
				addstudent: false,
				activeName: 'first',
				className: '',
				clazzDescribe: '',
				ClazzByCourseId: [],
				studentPhone: '',
				clazzId: '',
				classname: '',
				classID: window.localStorage.getItem("ClassId"),
				ClassStudents: [],
				dialogVisible: false,
				oldClazzId: '',
				// options: [],
				newClazzId: '',
				studentList: [],
				studentName: '',
				studentNum: '',
				myHeader: {
					token: window.localStorage.getItem("token")
				},
				fileList: [],
				SchoolId: '',
				studentPhones: []

			}

		},
		methods: {
			// 课程获取已经注册的学生信息，用于添加入课程
			getFiles() {

			},
			handleSelectionChange() {

			},
			handleClose() {
				this.addstudent = false
				this.dialogVisible = false
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			input() {

			},
			value() {

			},
			options() {

			},
			ChangeStudent() {
				this.addstudent = true;
				this.Search();
			},
			//创建班级
			creatClazzByTeacher() {
				var classID = window.localStorage.getItem("ClassId");
				var parmas = {
					className: this.className,
					clazzDescribe: this.clazzDescribe,
					courseId: classID
				}
				HttpManager.creatClazzByTeacher(parmas).then(e => {
					console.log(e);

					this.$message({
						message: '班级创建成功',
						type: 'success'
					});
					this.getClazzByCourseId();
				});
				this.newClassMask = false;

			},
			//获取班级列表
			getClazzByCourseId() {
				var parmas = {
					courseId: this.classID
				}
				HttpManager.getClazzByCourseId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.ClazzByCourseId = e.data.data;
				})

			},
			//获取班级下面的学生
			getStudents(val, name) {
				this.clazzId = val;
				this.classname = name;
				var parmas = {
					clazzId: val
				}
				HttpManager.getStudentsByClazzId(parmas).then(e => {
					console.log(e);
					this.ClassStudents = e.data.data;
				})
			},
			//通过手机号添加学生
			addStudentToClazzByPhone() {
				if (!this.clazzId) {
					this.$message({
						message: '请选择班级',
						type: 'warning'
					});
					return;
				}
				if(!this.studentPhone)
				{
					this.$message({
						message: '请输入电话号码',
						type: 'warning'
					});
					return;
				}
				var parmas = {
					clazzId: this.clazzId,
					studentPhone: this.studentPhone
				}
				HttpManager.addStudentToClazzByPhone(this.qs.stringify(parmas)).then(e => {
					console.log(e.data);
				})
				this.addstudent = false;
				this.getClazzByCourseId();
			},
			//删除班级里成员
			deleteStudentFromClazz(val) {
				var parmas = {
					clazzId: this.clazzId,
					studentPhone: val
				}
				HttpManager.deleteStudentFromClazz(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.getStudents(this.clazzId, this.classname);
				})
			},
			//调班
			changeStudentClazz(val, Phone) {
				this.oldClazzId = val;
				this.dialogVisible = true;
				this.studentPhone = Phone;

			},
			//修改班级
			changeClazz() {
				this.dialogVisible = false;
				var parmas = {
					courseId: this.classID,
					oldClazzId: this.oldClazzId,
					newClazzId: this.newClazzId,
					studentPhone: this.studentPhone

				}
				HttpManager.changeStudentClazz(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.$message({
						message: '调班成功',
						type: 'success'
					});
					this.getStudents(this.clazzId, this.classname);
				}).catch(e => {
					this.$message({
						message: '调班失败',
						type: 'warning'
					});
				})
			},
			//课程获取已经注册的学生信息，用于添加入课程
			// getCourseStudentList() {
			// 	var parmas={
			// 		page: 0,
			// 		size: 100,
			// 		schoolId: this.SchoolId,
			// 		isRegister: 1
			// 	}
			// 	HttpManager.InitselectStudent(parmas).then(e => {
			// 		console.log(e.data.data);
			// 		this.studentList = e.data.data;
			// 	})
			// },
			Rebuild() {
				this.studentNum = '';
			},
			Search() {

				if (this.studentNum) {
					var parmas = {
						schoolId: this.SchoolId,
						studentNum: this.studentNum
					}
				} else {
					var parmas = {
						schoolId: this.SchoolId
					}
				}

				HttpManager.selectStudentPageNum(parmas).then(e => {
					console.log(e.data.data);
					this.studentList = e.data.data;
				})
			},
			uploadFalse(response, file, fileList) {
				this.$message({
					message: '文件上传失败！',
					type: 'error'
				});
			},

			beforeUpload(file) {
				let filename = file.name
				let arr = filename.split('.')
				if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
					this.$message.error('上传文件只能是 excel/xls 格式!')
					return false
				}
				return arr
			},
			//导入学生
			uploadUrl: function() {
				return (
					BASE_URL + '/education/clazz/addStudentsToClazzByExel?courseId=' + localStorage.getItem("ClassId")
				);
			},
			uploadSuccess(response, file, fileList) {
				console.log(response)
				if (response.code == 200) {
					this.$message({
						message: response.message,
						type: 'success'
					});
				} else {
					this.$message({
						message: response.message,
						type: 'error'
					});
				}
			},
			//下载学生模板
			GettudentUploadTemplate() {
				let link = document.getElementById("linkUrl");
				link.href = BASE_URL + '/education/clazz';
				link.click();
			},
			//获取学校的id
			getSchoolIdByUserId() {
				HttpManager.getSchoolIdByUserId().then(e => {
					console.log(e.data.data);
					this.SchoolId = e.data.data;
					this.Search();
				})
			},
			SendMessge(data) {

				console.log(data);

				this.studentPhones = data;
			},
			addStudentsToClazzByPhone() {
				this.addstudent = false;
				if (!this.clazzId) {
					this.$message({
						message: '请选择班级',
						type: 'warning'
					});
					return;
				}
				HttpManager.addStudentsToClazzByPhone(this.clazzId, this.studentPhones).then(e => {
					console.log(e.data);
					this.$message({
						message: e.data.message,
						type: 'success'
					});
					this.getStudents(this.clazzId, this.classname);
				})
			}


		},
		created() {
			this.getClazzByCourseId();
			this.getSchoolIdByUserId();
			// this.getCourseStudentList();
		},



	}
</script>

<style scoped="scoped" lang="scss">
	// .el-table {
	//     &tr:hover>td { 
	//         background-color:#90c0f1； 
	//     }	
	// }
	.left {
		width: 15%;
	}

	.left_item {
		width: 100%;
		/* background-color: #00B6B4; */
		height: 33.75rem;
		overflow: auto;

	}


	li {
		list-style: none;

	}

	.main {
		display: flex;
		height: 3.5rem;
		line-height: 3.5rem;
		justify-content: space-around;
		font-size: 0.875rem;
		color: #dcdcdc;
	}

	.main div {
		cursor: pointer;
	}

	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width: 5px;
	}

	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 5px;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(236, 246, 255, 0.4);
	}

	.right {
		width: 84%;
		margin-top: 1.25rem;
		// height: 33.75rem;
		margin-left: 1%;
	}

	.el-table tr {
		background-color: #66b1ff
	}

	.group {
		height: 300px;
		display: flex;
		justify-content: space-between;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;


		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #181e33;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #03d3bd;
				}

				&:focus {
					border-color: #03d3bd;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #ffffff;
				}
			}
		}
	}

	.header1 button {
		height: 40px;
		width: 110px;
		outline: none;
		border: inherit;
		color: #3f3f3f;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		margin-left: 30px;
		cursor: pointer;
	}

	.header1 button:hover {
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
	}

	.header1 button i {
		margin-right: 5px;
		font-weight: bold;
	}

	.header1 .el-input {
		position: absolute;
		right: 0;
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}

	.el-tabs .el-tabs--top .el-tabs--border-card {
		background-color: #03d3bd;

	}
</style>
